<template>
	<div>
		<div>
			<el-form class="form-container" :model="form">
				<el-form-item label="关键字" label-width="60px" style="width: 280px" inline>
					<el-input placeholder="请输入关键字" v-model="form.keyword"></el-input>
				</el-form-item>
				<el-form-item label="状态" label-width="60px">
					<el-radio-group v-model="form.recordStatus">
						<el-radio-button label="不限" value="0" />
						<el-radio-button label="正常" value="1" />
						<el-radio-button label="停用" value="2" />
					</el-radio-group>
				</el-form-item>
				<el-form-item class="inline-form-item">
					<el-button type="primary" color="green" :icon="Search" title="班级查询" @click="queryList"></el-button>
				</el-form-item>
			</el-form>
		</div>
		<div style="text-align: right; margin-bottom: 2px">
			<el-button type="primary" :icon="Plus" title="创建学生" @click="showCreateDialog"></el-button>
		</div>
		<el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true"
			empty-text="未查询任何班级信息">
			<el-table-column label="序号" header-align="center" width="60" align="right">
				<template #default="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="college" label="所属学院" header-align="center" />
			<el-table-column prop="classNo" label="班级编号" header-align="center" width="200" />
			<el-table-column prop="className" label="班级名称" header-align="center" />
			<el-table-column prop="recordStatus" label="状态" header-align="center" align="center">
				<template #default="scope">
					<span v-if="1 == scope.row.recordStatus">
						<span style="color: blue">正常</span>
					</span>
					<span v-else-if="9 == scope.row.recordStatus">
						<span style="color: red">停用</span>
					</span>
					<span v-else>
						<span style="color: gold">未知</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" header-align="center">
				<template #default="scope">
					<el-button type="info" :icon="ZoomIn" title="详情" color="green"
						@click="showDetailsDialog(scope.$index)"></el-button>
					<el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
					<el-button type="danger" :icon="Delete" title="删除" @click="showDeleteDialog(scope.$index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 删除确认框开始 -->
		<el-dialog v-model="deleteDialogVisiable" title="删除班级" width="500" destroy-on-close center>
			<span>确认要删除班级【{{ current.className }}】吗?</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="deleteDialogVisiable = false">取消</el-button>
					<el-button type="primary" @click="deleteClass">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 删除确认框结束 -->
		<!-- 创建学生对话框 -->
		<CreateDialog ref="createDialog" @refresh="queryList"></CreateDialog>
		<!-- 修改学生对话框 -->
		<ModifyDialog ref="modifyDialog" @refresh="queryList"></ModifyDialog>
		<!-- 显示学生详细信息-->
		<DetailsDialog ref="detailsDialog"></DetailsDialog>
	</div>
</template>

<script setup>
	//导入图标
	import {
		ZoomIn,
		Plus,
		Delete,
		Edit,
		Search
	} from "@element-plus/icons-vue";
	import api from "@api/index.js";
	import getResponse from '@utils/http-client.js'
	import {
		ref,
		onMounted
	} from "vue";
	import {
		ElMessage
	} from "element-plus";
	//创建班级对话框
	import CreateDialog from "./CreateDialog.vue";
	//修改班级对话框
	import ModifyDialog from "./ModifyDialog.vue";
	//显示班级详细信息
	import DetailsDialog from "./DetailsDialog.vue";
	//删除Dialog对话框是否可见
	const deleteDialogVisiable = ref(false);
	//当前操作对象
	const current = ref({});
	//查询表单响应数据
	const form = ref({
		recordStatus: "0",
		keyword: "",
	});
	//当前删除记录索引
	const tableData = ref([{
		college: "计算机学院",
		classNo: "CS20230002",
		className: "计算机科学与技术2301班",
		recordStatus: 1,
	}, ]);
	let createDialog = ref(null);
	let modifyDialog = ref(null);
	let detailsDialog = ref(null);
	//打开删除班级对话框
	const showDeleteDialog = (rowIndex) => {
		current.value = tableData.value[rowIndex];
		deleteDialogVisiable.value = true;
		//记录待删除的学生记录索引
		current.value.rowIndex = rowIndex;
	};
	//打开修改学生对话框
	const showModifyDialog = (rowIndex) => {
		modifyDialog.value.dialogVisible = true;
		modifyDialog.value.form = tableData.value[rowIndex];
		let recordStatus = String(tableData.value[rowIndex].recordStatus);
		modifyDialog.value.form.recordStatus = recordStatus;
	};
	//打开显示详细信息对话框
	const showDetailsDialog = async (rowIndex) => {
		let classId = tableData.value[rowIndex].classId;
		let responseData = await api.classInfo.getById(classId);
		if (200 != responseData.code) {
			ElMessage({
				message: responseData.message,
				type: "error"
			});
			return;
		}
		let classInfo = responseData.data;
		if (classInfo === null) {
			ElMessage({
				message: "班级不存在",
				type: "warning"
			});
			return;
		}
		detailsDialog.value.classInfo = classInfo;
		detailsDialog.value.dialogVisible = true;
	};
	//打开创建班级对话框
	const showCreateDialog = () => {
		createDialog.value.dialogVisible = true;
	};
	//删除学生
	const deleteClass = async () => {
		deleteDialogVisiable.value = false;
		let rowIndex = current.value.rowIndex;
		let classId = current.value.classId;
		let responseData = await api.classInfo.deleteById(classId);
		if (200 != responseData.code) {
			ElMessage({
				message: responseData.message,
				type: "error"
			});
			return;
		}
		let result = responseData.data;
		if (result) {
			tableData.value.splice(rowIndex, 1);
			ElMessage({
				message: "删除成功",
				type: "success"
			});
		} else {
			ElMessage({
				message: "删除失败,记录不存在或已被删除",
				type: "warning"
			});
		}
	};
	//查询班级信息
	const queryList = async () => {
		let params = {};
		let keyword = form.value.keyword.trim();
		if ("" !== keyword) {
			params.keyword = keyword;
		}
		let recordStatus = form.value.recordStatus;
		if ("0" !== recordStatus) {
			params.recordStatus = recordStatus;
		}
		let responseData = await api.classInfo.queryList(params);
		if (200 != responseData.code) {
			ElMessage({
				message: responseData.message,
				type: "error"
			});
			return;
		}
		let list = responseData.data;
		if (list === null || list.length == 0) {
			ElMessage({
				message: "查询无班级信息",
				type: "warning"
			});
			tableData.value = [];
			return;
		} else {
			tableData.value = list;
		}
	};
	//组件加载后执行查询
	onMounted(async () => {
		let responseData = await getResponse('http://127.0.0.1:9001/qian/api/class/list', 'get');
		if (200 != responseData.code) {
			ElMessage({
				message: responseData.message,
				type: "error"
			});
			return;
		}
		let list = responseData.data;
		if (list === null || list.length == 0) {
			ElMessage({
				message: "查询无班级信息",
				type: "warning"
			});
			tableData.value = [];
			return;
		} else {
			tableData.value = list;
		}
	});
</script>
<style scoped>
	.form-container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.inline-form-item {
		margin-left: 20px;
	}
</style>